<template>
  <div class="container">
    <el-card shadow="always" class="analysis">
      <div class="title">
        {{ $moment().subtract(1, "day").format("YYYY-MM-DD") }}综合分值分析
      </div>
      <el-row :gutter="20">
        <el-col :span="8"> <div class="main"></div> 
        </el-col>
        <el-col :span="8"> <div class="radar"></div></el-col>
        <el-col :span="8">
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="name" label="分类"> </el-table-column>
            <el-table-column prop="max" label="分值"> </el-table-column>
            <el-table-column prop="value" label="得分">
              <template slot-scope="scope">
                <div>
                  <router-link :to="scope.row.url+''" tag="a">{{scope.row.value}}</router-link>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>


    <rz-height></rz-height>

    <template v-if="recordList.length&&recordList[0].detailUnitFoodRecordResponseList.length">
      <div>
          <div class="title">
       综合扣分明细
      </div>
    <rz-height></rz-height>
    <el-table :data="recordList.length&&recordList[0].detailUnitFoodRecordResponseList" border style="width: 100%">
        <el-table-column prop="categoryStr" label="分类" width="100">
        </el-table-column>
        <el-table-column prop="reasonReason" label="扣分明细">
                <template slot-scope="scope">
                  <div>
                    {{scope.row.reasonReason|filterHtml}}
                  </div>
                </template>
        </el-table-column>
        <el-table-column prop="score" label="扣分分值"  width="100"> 
           <template slot-scope="scope">
            <div v-if="scope.row.categoryStr=='主体责任'">
              {{scope.row.score}}
            </div>
            <div v-else>
              {{scope.row.score}}
            </div>
          </template>
        </el-table-column>
      
      </el-table>
      </div>
    </template>



    </el-card>
    <rz-height></rz-height>
    <el-card shadow="always">
      <div class="title">近10天食安指数分析</div>
      <rz-height></rz-height>
      <div class="line"></div>
    </el-card>
    <rz-height></rz-height>
    <el-card shadow="always">
      <div class="title">更新记录</div>
      <rz-height></rz-height>
    <div style="overflow:hidden">
        <el-table :data="recordList" border style="width: 100%;" ref="table">
            <el-table-column type="expand" width="1">
      <template slot-scope="props">

          <div class="table">
               <el-table :data="props.row.detailUnitFoodRecordResponseList" border style="width: 100%">
        <el-table-column prop="categoryStr" label="分类"  width="100">
        </el-table-column>
        <el-table-column prop="reasonReason" label="扣分明细">
                <template slot-scope="scope">
                  <div>
                    {{scope.row.reasonReason|filterHtml}}
                  </div>
                </template>
        </el-table-column>
        <el-table-column prop="score" label="扣分分值"  width="100">
        <template slot-scope="scope">
            <div v-if="scope.row.categoryStr=='主体责任'">
              {{scope.row.score}}
            </div>
            <div v-else>
              {{scope.row.score}}
            </div>
          </template>
          
           </el-table-column>
      
      </el-table>

          </div>
      </template>
    </el-table-column>
        <el-table-column prop="createTimeStr" label="评估时间">
        </el-table-column>
        <el-table-column prop="aqsgScore" label="安全事故"> </el-table-column>
        <el-table-column prop="ztzrScore" label="主体责任落实">
        </el-table-column>
        <el-table-column prop="tsjbScore" label="投诉举报"> </el-table-column>
        <el-table-column prop="jdzfScore" label="日常监督"> </el-table-column>
        <el-table-column prop="spcjScore" label="食品抽检"> </el-table-column>
        <el-table-column prop="indexScore" label="总分值"> </el-table-column>
        <el-table-column  label="操作">
            <template slot-scope="scope">
            <!-- <el-button size="mini" type="primary"  @click="view(scope.row)"
              >查看</el-button> -->
              <a href="javascript:;" style="font-size:12px;color:#1890ff" @click="view(scope.row)" v-if="scope.row.detailUnitFoodRecordResponseList.length">
                  <span>扣分明细 </span>
                 <i style="display:inline-block;" class="el-icon el-icon-arrow-right"></i>
              </a>
            
          </template>
           </el-table-column>
      </el-table>
    </div>
    </el-card>
  </div>
</template>
<script>
import {
  findByFSuperviseunitId,
  findListByConditionSafety,
} from "@/api/modules/interpretation";

var echarts = require("echarts");
export default {
  // props:[],
  // 页面加载
  created() {
    this.getList();
    this.findListByConditionSafety();
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      tableData: [],
      data: {},
      recordList: [],
    };
  },
  // 方法
  methods: {
    meterInit() {
      var chartDom = document.querySelector(".main");
      var myChart = echarts.init(chartDom);
      let option = {
        series: [
          {
            type: "gauge",
            axisLine: {
              lineStyle: {
                width: 20,
                color: [
                  [0.59, "#ff0000"],
                  [0.79, "#ffd700"],
                  [1, "#008000"],
                ],
              },
            },
            pointer: {
              itemStyle: {
                color: "auto",
              },
            },
            axisTick: {
              distance: -20,
              length: 8,
              lineStyle: {
                color: "#fff",
                width: 1,
              },
            },
            splitLine: {
              distance: -35,
              length: 30,
              lineStyle: {
                color: "#fff",
                width: 1,
              },
            },
            axisLabel: {
              color: "auto",
              distance: 30,
              fontSize: 15,
            },
            detail: {
              valueAnimation: true,
              formatter: "{value}",
              color: "auto",
            },
            data: [
              {
                value: this.data.indexScore,
              },
            ],
            center: ["50%", "50%"],
            radius: "80%",
          },
        ],
      };
      myChart.setOption(option);
    },
    radarInit() {
      var chartDom = document.querySelector(".radar");
      var myChart = echarts.init(chartDom);
      let option = {
        lineStyle: {
          color: "#1890ff",
        },
        title: {
          // text: "Basic Radar Chart",
        },
        tooltip: {
          show: true,
        },
        // legend: {
        //   data: ["Allocated Budget", "Actual Spending"],
        // },
        radar: {
          // shape: 'circle',
          indicator: [
            { name: "安全事故", max: this.data.aqsgTotalScore },
            { name: "主体责任", max: this.data.ztzrTotalScore },
            { name: "投诉举报", max: this.data.tsjbTotalScore },
            { name: "日常监督", max: this.data.jdzfTotalScore },
            { name: "食品抽检", max: this.data.spcjTotalScore },
          ],
          axisName: {
            // formatter: '【{value}】',
            color: "#1890ff",
          },
          splitArea: {
            areaStyle: {
              // color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
              shadowColor: "rgba(0, 0, 0, 0.2)",
              shadowBlur: 10,
            },
          },
        },
        series: [
          {
            name: "分值",
            type: "radar",
            data: [
              {
                value: [
                  this.data.aqsgScore < 0 ? 0 : this.data.aqsgScore,
                  this.data.ztzrScore < 0 ? 0 : this.data.ztzrScore,
                  this.data.tsjbScore < 0 ? 0 : this.data.tsjbScore,
                  this.data.jdzfScore < 0 ? 0 : this.data.jdzfScore,
                  this.data.spcjScore < 0 ? 0 : this.data.spcjScore,
                ],
              },
            ],
            itemStyle: {
              // normal: {
                color: "#1890ff",
                //  opacity: 0
              // },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    lineInit() {
      let chartDom = document.querySelector(".line");
      let myChart = echarts.init(chartDom);
      let option = {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: [
            "总分值",
            "安全事故",
            "主体责任",
            "投诉举报",
            "日常监督",
            "食品抽检",
          ],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.recordList.map((x) => x.createTimeStr).reverse(),
          axisLabel: {
            //底部文字倾斜
            interval: 0,
            rotate: 25,
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            itemStyle: { label: { show: true }  },

            type: "line",
            name: "总分值",
            data: this.recordList.map((x) => x.indexScore).reverse(),
          },
          {
            itemStyle: { label: { show: true } } ,
            type: "line",
            name: "安全事故",
            data: this.recordList.map((x) => x.aqsgScore).reverse(),
          },
          {
            itemStyle: {  label: { show: true }  },

            type: "line",
            name: "主体责任",
            data: this.recordList.map((x) => x.ztzrScore).reverse(),
          },
          {
            itemStyle: { label: { show: true }  },

            type: "line",
            name: "投诉举报",
            data: this.recordList.map((x) => x.tsjbScore).reverse(),
          },
          {
            itemStyle: { label: { show: true }  },

            type: "line",
            name: "日常监督",
            data: this.recordList.map((x) => x.jdzfScore).reverse(),
          },
          {
            itemStyle: {  label: { show: true }  },

            type: "line",
            name: "食品抽检",
            data: this.recordList.map((x) => x.spcjScore).reverse(),
          },
        ],
        // this.recordList.map(x=>{})
      };
      myChart.setOption(option);
    },
    getList() {
      findByFSuperviseunitId({
        params: {
          fSuperviseunitId: sessionStorage.getItem("interpretation"),
        },
      }).then((res) => {
        this.data = res.data;
        res.data.foodSafetyIndexItemResponseList.forEach((x) => {
          if (x.name == "安全事故") {
            x.url = "/interpretation/security";
          } else if (x.name == "主体责任") {
            x.url = "/interpretation/homeRespon";
          } else if (x.name == "投诉举报") {
            x.url = "/interpretation/complaints";
          } else if (x.name == "日常监督") {
            x.url = "/interpretation/supervise";
          } else if (x.name == "食品抽检") {
            x.url = "/interpretation/spotCheck";
          }
        });
        this.tableData = res.data.foodSafetyIndexItemResponseList;
        this.$nextTick(() => {
          this.meterInit();
          this.radarInit();
        });
      });
    },
    findListByConditionSafety() {
      findListByConditionSafety({
        fSuperviseunitId: sessionStorage.getItem("interpretation"),
        indexYear: new Date().getFullYear(),
        startDate: this.$moment().subtract(10, "day").format("YYYY-MM-DD"),
        endDate: this.$moment().format("YYYY-MM-DD"),
        isReverseTimeOrder: "1",
      }).then((res) => {
        this.recordList = res.data;
        this.lineInit();
      });

    },
    view(row){
  let $table = this.$refs.table;
      $table.toggleRowExpansion(row)
    }

  },
  // 监听属性
  watch: {},
  // 组件
  components: {},
  // 计算属性
  computed: {},
};
</script>

<style lang="scss" scoped>
.container {
  // background-color: #fff;

  .title {
    font-size: 20px;
  }
  .main,
  .radar,
  .line {
    height: 250px;
    width: 100%;
  }
  .analysis {
    /deep/ .el-table--medium .el-table__cell {
      padding: 7px 0;
    }
    a{
      text-decoration: underline;
      color: $default;
    }
  }
  .table{
    padding: 0 10px;
  }
  
/deep/ .el-icon-arrow-right{
    display: none ;
 
  }
}
</style>